<template>
    <el-dialog v-model="show" title="内部转账" width="20%" align-center @close="handleClose">
        <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="auto" class="demo-ruleForm"
            status-icon>
            <el-form-item label="付款账号:">
                {{ props.initList.name }}
            </el-form-item>
            <el-form-item label="所属公司:">
                {{ props.subsidiariesList.filter((dick: any) => dick.id ===
                    props.initList.companyId)[0].companyName
                }}
            </el-form-item>
            <el-form-item label="收款账号:" prop="collectAccount">
                <el-select style="width: 100%;" @change="handleChange" v-model="ruleForm.collectAccount"
                    placeholder="请选择收款账号">
                    <el-option v-for="item in props.allList" :key="item.id" :label="item.name" :value="item.id" />
                </el-select>
            </el-form-item>
            <el-form-item label="所属公司:">
                {{ ruleForm.collectCompanyId && props.subsidiariesList.filter((dick: any) => dick.id ===
                    ruleForm.collectCompanyId)[0].companyName
                }}
            </el-form-item>
            <el-form-item label="转账余额:" prop="transferAmount">
                <el-input v-model="ruleForm.transferAmount" placeholder="请输入转账余额" />
            </el-form-item>
        </el-form>

        <template #footer>
            <div class="dialog-footer">
                <el-button @click="handleClose">取 消</el-button>
                <el-button type="primary" v-loading="loading" @click="handleSubmit(ruleFormRef)">确 定</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import type { FormInstance, FormRules } from 'element-plus'
import { addInnerTransferApi } from '@/api/sj/financialManagement/paymentCard/index'

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const props = defineProps(['visible', 'initList', 'subsidiariesList', 'allList']);
const emits = defineEmits(['submit', 'close']);

const show = ref(false);

watch(() => props.visible, async (newValue) => {
    show.value = newValue
    if (newValue) {
    }
}, { deep: true });

interface RuleForm {
    collectAccount: number | null;
    transferAmount: number | null;
    collectCompanyId: number | null;
};
const ruleFormRef = ref<FormInstance>();
const loading = ref(false);
const ruleForm = reactive<RuleForm>({
    collectAccount: null,
    transferAmount: null,
    collectCompanyId: null,
})

const rules = reactive<FormRules>({
    transferAmount: [
        { required: true, message: '请输入转账余额', trigger: 'blur' },
    ],
    collectAccount: [
        {
            required: true,
            message: '请选择收款账号',
            trigger: ['blur', 'change'],
        },
    ],
});

const handleChange = (val: any) => {
    ruleForm.collectCompanyId = props.allList.filter((dick: any) => dick.id === val)[0].companyId
};

const handleSubmit = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate(async (valid, fields) => {
        if (valid) {
            if (ruleForm.collectAccount === props.initList.id) return proxy?.$modal.msgError('不能转账给相同的收款卡');
            loading.value = true;

            let query = {
                paymentAccount: props.initList.id,
                paymentCompanyId: props.initList.companyId,
                ...ruleForm,
            }
            try {
                const { code } = await addInnerTransferApi(query)
                if (code === 200) {
                    loading.value = false;
                    proxy?.$modal.msgSuccess('转账成功!')
                    emits('submit');
                    handleClose();

                }
            } catch (error) {
                loading.value = false;
            }

        } else {
            console.log('error submit!', fields)
        }
    })
}


const handleClose = () => {
    ruleFormRef.value?.resetFields();
    emits('close');
};

onMounted(() => {
})
</script>

<style lang="scss" scoped></style>